<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <style>
        	.zhuti{
        		width:500px;
        		height: 200px;
        		margin:0 auto;
        	}
        	.defaultdiv{
        		width:100%;
        		float:left;
        		margin-bottom:15px;
        	}
        	.input{
        		border:1px solid skyblue;
        		border-radius:8px;
        		padding-left:15px;
        		padding-right:15px;
        		box-sizing:border-box;
        		height: 30px;
        		line-height:30px;
        		outline:none;
        	}
        	.jihe{
        		width:1000px;
        		height: auto;
        		margin:0 auto;
        		margin-bottom:20px;
        		background-color: red;
        	}
        	.jihediv{
        		width:25%;
        		margin-left:2%;
        		float:left;
        		margin-bottom:20px;
        	}
        	.btn{
        		border:none;
        		width:50px;
				height: 30px;
				line-height:30px;
				color:white;
				font-size:12px;
				border-radius:8px;
				cursor:pointer;
				float:right;
				margin-left:15px;
				outline:none;
        	}
        	.insert{
        		background-color: green;
				float:left;
        	}
        	.search{
        		background-color: orange;
				float:left;
        	}
        	.update{
        		background-color: skyblue;
        	}
        	.delete{
        		background-color: red;
        	}
        	.col{
        		width:100%;
        	}
			a{
				color:skyblue;
				float:left;
				text-decoration: none;
				width:100%;
				height: 25px;
				margin-top:15px;
			}
			.error{
				display:none;
				width: 100%;
				color:red;
				float:left;
			}
			.juzhong{
				text-align: center;
			}
			.canupdate{
				background-color: green;
			}
        </style>
    </head>
    <body>
	<h1 class="juzhong"><span class="adminname"></span>,欢迎回来</h1>
    <div class="zhuti">
    	<div class="defaultdiv">姓名: <input type="text" class="input name" placeholder="请输入用户名"></div>
    	<div class="defaultdiv">性别: <input type="text" class="input sex" placeholder="请输入性别"></div>
    	<div class="defaultdiv">年龄: <input type="text" class="input age" placeholder="请输入年龄"></div>
    	<button class="btn insert">插入</button>
    	<button class="btn search">搜索</button>
		<span class="inserterror error">插入数据不成功</span>
		<span class="searcherror error">搜索数据不成功</span>
		<a href="http://127.0.0.1:3000/log">返回登录界面</a>
    </div>

    <div class="jihe">
    	
    </div>
    </body>

	<script src="js/doT.min.js"></script>
	<script type="text/doT" class="abc">
    	{{~it:item}}
    		<div class="col">
    			<div class="defaultdiv">
					姓名: <input type="text" class="input name" placeholder="请输入姓名" value={{=item.name}}>
					性别: <input type="text" class="input sex" placeholder="请输入性别" value={{=item.sex}}>
					年龄: <input type="text" class="input age" placeholder="请输入年龄" value={{=item.age}}>
					<button class="btn update">更新</button>
					<button class="btn delete">删除</button>
    			</div>

    		</div>
    	{{~}}
    </script>
	<script src="js/jquery.min.js"></script>
    <script>
		function heidong(data){

				var ht = doT.template($('.abc').html());
				var str = ht(data)
				$('.jihe').html(str);
				$('.col>.defaultdiv>.input').attr('disabled', 'true');
			$('.defaultdiv>.delete').click(function () {
				var delname = $(this).parent('.defaultdiv').children('.name').val();
				var delsex = $(this).parent('.defaultdiv').children('.sex').val();
				var delage = $(this).parent('.defaultdiv').children('.age').val();
				var data={
					delname:delname,
					delsex:delsex,
					delage:delage
				}
				$.post('http://127.0.0.1:3000/delete', data, function (data, textStatus, xhr) {
					heidong(data);
				})
			})
				$('.defaultdiv>.update').click(function () {
					if ($(this).css('background-color') == "rgb(135, 206, 235)") {
						$(this).css('background-color', 'green');
						$(this).parent('.defaultdiv').children('.input').removeAttr('disabled');
						$(this).parent('.defaultdiv').parent('.col').siblings('.col').children('.defaultdiv').children('.input').attr('disabled', 'true');
						$(this).parent('.defaultdiv').parent('.col').siblings('.col').children('.defaultdiv').children('.update').css('background-color', 'skyblue');
						oldname = $(this).parent('.defaultdiv').children('.name').val();
						oldsex = $(this).parent('.defaultdiv').children('.sex').val();
						oldage = $(this).parent('.defaultdiv').children('.age').val();

					} else {
						$(this).css('background-color', 'skyblue');
						newname = $(this).parent('.defaultdiv').children('.name').val();
						newsex = $(this).parent('.defaultdiv').children('.sex').val();
						newage = $(this).parent('.defaultdiv').children('.age').val();
						var data = {
							oldname: oldname,
							oldsex: oldsex,
							oldage: oldage,
							newname: newname,
							newsex: newsex,
							newage: newage
						}
						$.post('http://127.0.0.1:3000/update', data, function (data, textStatus, xhr) {
							heidong(data);
						})
					}

				})

		}
    	$(function(){
			var oldname;
			var oldsex;
			var oldage;
			var newname;
			var newsex;
			var newage;
			var heros={key:'hero'};
			$.post('http://127.0.0.1:3000/load',heros,function(data, textStatus, xhr) {
				heidong(data);
			})

			$('.adminname').text(localStorage.getItem('name'));
			$('.error').click(function(){
				$('.error').css('display','none');
			})
			$(".insert").click(function(){
				if($('.name').val()!=""&&$('.sex').val()!=""&&$('.age').val()!=""){
					var name =$('.name').val();
					var sex = $('.sex').val();
					var age = $('.age').val();
					var data={
						name:name,
						sex:sex,
						age:age
					}
					$.post('http://127.0.0.1:3000/charu',data,function(data, textStatus, xhr){
						if(String(data)=="error"){
							$('.inserterror').css('display','block');
						}else{
							var ht = doT.template($('.abc').html());
							var str = ht(data)
							$('.jihe').html(str);
							$('.col>.defaultdiv>.input').attr('disabled', 'true');
							$('.defaultdiv>.delete').click(function () {
								var delname = $(this).parent('.defaultdiv').children('.name').val();
								var delsex = $(this).parent('.defaultdiv').children('.sex').val();
								var delage = $(this).parent('.defaultdiv').children('.age').val();
								var data={
									delname:delname,
									delsex:delsex,
									delage:delage
								}
								$.post('http://127.0.0.1:3000/delete', data, function (data, textStatus, xhr) {
									heidong(data);
								})
							})
							$('.defaultdiv>.update').click(function () {
								if ($(this).css('background-color') == "rgb(135, 206, 235)") {
									$(this).css('background-color', 'green');
									$(this).parent('.defaultdiv').children('.input').removeAttr('disabled');
									$(this).parent('.defaultdiv').parent('.col').siblings('.col').children('.defaultdiv').children('.input').attr('disabled', 'true');
									$(this).parent('.defaultdiv').parent('.col').siblings('.col').children('.defaultdiv').children('.update').css('background-color', 'skyblue');
									oldname = $(this).parent('.defaultdiv').children('.name').val();
									oldsex = $(this).parent('.defaultdiv').children('.sex').val();
									oldage = $(this).parent('.defaultdiv').children('.age').val();

								} else {
									$(this).css('background-color', 'skyblue');
									newname = $(this).parent('.defaultdiv').children('.name').val();
									newsex = $(this).parent('.defaultdiv').children('.sex').val();
									newage = $(this).parent('.defaultdiv').children('.age').val();
									var data = {
										oldname: oldname,
										oldsex: oldsex,
										oldage: oldage,
										newname: newname,
										newsex: newsex,
										newage: newage
									}
									$.post('http://127.0.0.1:3000/update', data, function (data, textStatus, xhr) {
										heidong(data);
									})
								}

							})
						}

					})
				}else{
					$('.inserterror').css('display','block');
				}

			})
    		$('.search').click(function(){
				if($('.name').val()!=""){
					var name =$('.name').val();
					var sex = $('.sex').val();
					var age = $('.age').val();
					var data={
						name:name,
						sex:sex,
						age:age
					}
					$.post('http://127.0.0.1:3000/search',data,function(data, textStatus, xhr){
						if(String(data)=="error"){
							$('.searcherror').css('display','block');
						}else{
							var ht = doT.template($('.abc').html());
							var str = ht(data)
							$('.jihe').html(str);
							$('.col>.defaultdiv>.input').attr('disabled', 'true');
							$('.defaultdiv>.delete').click(function () {
								var delname = $(this).parent('.defaultdiv').children('.name').val();
								var delsex = $(this).parent('.defaultdiv').children('.sex').val();
								var delage = $(this).parent('.defaultdiv').children('.age').val();
								var data={
									delname:delname,
									delsex:delsex,
									delage:delage
								}
								$.post('http://127.0.0.1:3000/delete', data, function (data, textStatus, xhr) {
									heidong(data);
								})
							})
							$('.defaultdiv>.update').click(function () {
								if ($(this).css('background-color') == "rgb(135, 206, 235)") {
									$(this).css('background-color', 'green');
									$(this).parent('.defaultdiv').children('.input').removeAttr('disabled');
									$(this).parent('.defaultdiv').parent('.col').siblings('.col').children('.defaultdiv').children('.input').attr('disabled', 'true');
									$(this).parent('.defaultdiv').parent('.col').siblings('.col').children('.defaultdiv').children('.update').css('background-color', 'skyblue');
									oldname = $(this).parent('.defaultdiv').children('.name').val();
									oldsex = $(this).parent('.defaultdiv').children('.sex').val();
									oldage = $(this).parent('.defaultdiv').children('.age').val();

								} else {
									$(this).css('background-color', 'skyblue');
									newname = $(this).parent('.defaultdiv').children('.name').val();
									newsex = $(this).parent('.defaultdiv').children('.sex').val();
									newage = $(this).parent('.defaultdiv').children('.age').val();
									var data = {
										oldname: oldname,
										oldsex: oldsex,
										oldage: oldage,
										newname: newname,
										newsex: newsex,
										newage: newage
									}
									$.post('http://127.0.0.1:3000/update', data, function (data, textStatus, xhr) {
										heidong(data);
									})
								}

							})
						}

					})
				}else{
					$('.searcherror').css('display','block');
				}
			})
    	})
    </script>
</html>